<template>
  <div id="wrapper">
    <div id="app">
      <img alt="Vue logo" src="./assets/logo.png">
    </div>
    <h1>{{gameStatus}}</h1>
    <ChessSquare
      @click-Square="clickSquare"
      :cellArr="cellArr"
      :winnerLine="winnerArr"
    >
    </ChessSquare>
  </div>

</template>

<script>
import ChessSquare from "@/components/ChessSquare"
import { magic, checkWinner } from "./tools"
  // const checkWinner = () => {}

export default {
  name: 'App',
  data(){
    return {
      cellArr: new Array(9).fill(null),
      playerX: true,
      gameStatus: "Next Player: X",
      play1: [],
      play2: [],
      gameover: false,
      winnerArr: []
    }
  },
  components: {
    ChessSquare
  },
  methods:{
    clickSquare(index){
      if(this.cellArr[index]){
        return
      }
      if(this.gameover){
        return
      }
      // this.playerX ? this.cellArr[index]="X":this.cellArr[index]="O"
      this.cellArr[index] = this.playerX ? "X" : "O"
      //返回一个新数组
      const res = this.cellArr.slice()
      res[index] = this.cellArr[index]
      this.cellArr = res

      this.playerX = !this.playerX
      //状态显示
      this.gameStatus = this.playerX ? "Next Player: X" : "Next Player: O"
      //判断输赢
      if (this.playerX) {
        this.play2.push(magic[index])
        console.log(this.play2,"OOOOOO")
      }else {
        this.play1.push(magic[index])
        console.log(this.play1,"XXXXXX")
      }
      //提函数的时候报错，gameStatus有问题
      // const play1Res = this.checkWinner(this.play1, "x")
      const play1Res = checkWinner(this.play1, "x")
      if (play1Res.gameover) {
        this.gameStatus = play1Res.gameStatus
        this.gameover = play1Res.gameover
        this.winnerArr = play1Res.lines
      }

      // const play2Res = this.checkWinner(this.play2, "o")
      const play2Res = checkWinner(this.play2, "o")
      if (play2Res.gameover) {
        this.gameStatus = play2Res.gameStatus
        this.gameover = play2Res.gameover
        this.winnerArr = play2Res.lines
      }
    },

  }

}
</script>

<style>
  body{
    background-color: darkseagreen;
  }
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 20px;
}
  #wrapper{
    width: 300px;
    margin: 0 auto;
    text-align: center;
  }
  h1{
    font-size: 35px;
  }
</style>
